import React, { Component } from 'react'
import './main.css';
import Todo from './Todo'
import Footer from './Footer.js'
import {todoAdd,todoList,todoCheck,todoDel} from '../api/todoApi'
export default class TodoList extends Component {
  constructor(){
    super()
    this.state = {
      task:'任务名称',
      activeNum:0,  //标志底部菜单激活状态 0全部  1未完成  2已完成
      tasklist:[]
    }
    this.handleChange = this.handleChange.bind(this)
    this.handleAdd = this.handleAdd.bind(this)
    this.handleCheck = this.handleCheck.bind(this)
    this.handleDel = this.handleDel.bind(this)
    this.handleUpdate = this.handleUpdate.bind(this)
    this.handleActiveNum = this.handleActiveNum.bind(this)
    this.filterTaskList = this.filterTaskList.bind(this)
    this.leftNum = this.leftNum.bind(this)
    this.handleAllCheck = this.handleAllCheck.bind(this)
  }
  componentDidMount(){
    todoList().then(res=>{
      console.log(res);
      this.setState({
        tasklist:res.data.results
      })
    })
  }
  handleChange(ev){  //动态获取input内容
    let task =ev.target.value;
    console.log(task);
    this.setState({task})
  }
  handleAdd(ev){  //新增任务
    let {task,tasklist} = this.state;
    if(ev.keyCode===13&&task.trim()!==''){
      let taskObj = {  //等待被添加的任务对象
        taskname:task,
        isCheck:false
      }
      todoAdd(taskObj).then(res=>{
        console.log(res);
        tasklist.push({  
          objectId:res.data.objectId,
          ...taskObj
        })
        this.setState({
          tasklist,
          task:''
        })
      })
    }
  }
  handleCheck(id){  //单选功能
    let {tasklist} = this.state
    let Len = tasklist.length
    let bool = true;  //记录勾选状态的修改后的值
    for(let i=0;i<Len;i++){
      if(tasklist[i].objectId===id){  //找到被触发勾选的任务
        tasklist[i].isCheck = !tasklist[i].isCheck
        bool = tasklist[i].isCheck
        break;
      }
    }
    todoCheck(id,bool).then(res=>{ //发起在线更新请求
      this.setState({tasklist})
    })
  }
  handleDel(id){  //删除任务
    let {tasklist} = this.state
    let Len = tasklist.length
    for(let i=0;i<Len;i++){
      if(tasklist[i].objectId===id){  //找到被触发勾选的任务
        tasklist.splice(i,1)
        break;
      }
    }
    todoDel(id).then(res=>{
      this.setState({tasklist})
    })
  }
  handleUpdate(id,newtask){  //编辑任务内容
    let {tasklist} = this.state
    let Len = tasklist.length
    for(let i=0;i<Len;i++){
      if(tasklist[i].objectId===id){  //找到被触发勾选的任务
        tasklist[i].taskname = newtask //更新任务内容
        break;
      }
    }
    this.setState({tasklist})
  }
  handleActiveNum(idx){ //修改底部菜单的激活状态
    this.setState({
      activeNum:idx
    })
  }
  handleAllCheck(){  //全选按钮事件
    let bool = this.leftNum()===0?false:true
    let {tasklist} = this.state
    tasklist.forEach(item=>{
      item.isCheck = bool
    })
    this.setState({tasklist})
  }
  filterTaskList(){ //根据底部菜单的切换，过滤任务列表
    let {activeNum,tasklist} = this.state
    switch (activeNum) {
      case 1:   //未完成
        return tasklist.filter(item=>{
          return !item.isCheck
        })
      case 2:   //已完成
        return tasklist.filter(item=>{
          return item.isCheck
        })
      default:
        return tasklist
    }
  }
  leftNum(){  //计算剩余任务数量
    let num=0;
    this.state.tasklist.forEach(item=>{
      if(!item.isCheck){
        num++
      }
    })
    return num
  }
  render() {
    let {task,tasklist,activeNum} = this.state
    return (
      <div className="cont">
        <header className="header">
          <h1>Todos</h1>
          <input 
            type="text" 
            className="new-todo" 
            placeholder="请输入待办事项~" 
            value={task}
            onChange={this.handleChange}
            onKeyUp={this.handleAdd}
          />
        </header>

        <section className="main">
          <input 
            type="checkbox" 
            className="toggle-all" 
            checked={this.leftNum()===0?true:false}
            onChange={this.handleAllCheck}
          />
          <ul className="todo-list">
            {
              this.filterTaskList().map(item=>{
                return <Todo 
                          key={item.objectId}
                          {...item}
                          handleCheck={this.handleCheck}
                          handleDel={this.handleDel}
                          handleUpdate={this.handleUpdate}
                        />
              })
            }
          </ul>
        </section>

        {
          tasklist.length
          ?
          <Footer 
            tasklist={tasklist}
            activeNum={activeNum}
            leftNum={this.leftNum()}
            handleActiveNum={this.handleActiveNum}
          />
          :
          ''
        }
      </div>
    )
  }
}
